<template>
  <a-form
      :model="formState"
      name="basic"
      @finish="onFinish"
      style="margin-right:50px; margin-top: 20px;"
  >
    <a-form-item label="项目名称" v-bind="validateInfos.name">
      <a-input v-model:value="formState.name"/>
    </a-form-item>
    <a-form-item label="项目介绍" style="margin-left: 10px;">
      <a-textarea :rows="7" v-model:value="formState.description"/>
    </a-form-item>
    <a-form-item style="text-align: right;">
      <a-button type="primary" html-type="submit" :loading="loading">保存</a-button>
    </a-form-item>
  </a-form>
</template>
<script lang="ts" setup>
import {reactive} from 'vue';
import axios from "@/axios";
import {Form, message} from 'ant-design-vue';

const useForm = Form.useForm;

// 按钮的加载状态
let loading = false;

const formState = reactive({
  name: '',
  description: ''
});

const {validate, validateInfos} = useForm(
    formState,
    reactive({
      name: [
        {
          required: true,
          message: '请输入名称'
        }
      ],
    })
)

const emit = defineEmits(['closeModal'])

const onFinish = () => {
  // 提交表单
  validate().then(
      () => {
        axios.post("/program", formState).then((response) => {
          // 清空输入框
          formState.name = '';
          formState.description = '';
          message.success(response.message);
          loading = false;
        });
        emit('closeModal', false);
      }
  )
  return;
};

</script>

